<script lang="ts" setup>
import { reactive } from 'vue'
import useElementPlus from "@/hooks/useElementPlus"
import selectImage from '@/components/selectImage.vue'

const { message } = useElementPlus()

// 基础设置表单
const baseForm = reactive({
  enable_distribution: 1, // 1开启 0禁用
  poster_image: 'https://shop-admin-hdq.oss-cn-beijing.aliyuncs.com/20250419230233.jpg'
})

// 返佣设置表单
const commissionForm = reactive({
  level1_rate: 10,
  level2_rate: 10,
  self_purchase: 0 // 0否 1是
})

// 结算设置表单
const settlementForm = reactive({
  settlement_days: 7,
  payment_method: 1 // 1手动到账 2自动到微信等待转
})

// 上传海报图片
const handleUploadPoster = () => {
  console.log('上传海报')
}

// 保存设置
const saveSettings = () => {
  message({
    message: "保存成功",
    type: "success"
  })
}
</script>

<template>
  <!-- 基础设置 -->
  <el-card class="card op" :body-style="{ padding: '10px 20px 20px 20px' }">
    <template #header>
      <div class="setting">基础设置</div>
    </template>
    <div class="form-content">
      <div class="form-item">
        <div class="form-label">分销启用</div>
        <div class="form-control">
          <el-radio-group v-model="baseForm.enable_distribution">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">分销海报图</div>
        <div class="form-control">
          <div class="poster-wrapper">
           <selectImage :multiple="false" :avatarUrl="baseForm.poster_image" @selectImage="handleUploadPoster"/>
          </div>
        </div>
      </div>
    </div>
  </el-card>
  
  <!-- 返佣设置 -->
  <el-card class="card op" :body-style="{ padding: '10px 20px 20px 20px' }">
    <template #header>
      <div class="setting">返佣设置</div>
    </template>
    <div class="form-content">
      <div class="form-item">
        <div class="form-label">一级返佣比例</div>
        <div class="form-control">
          <div class="rate-input">
            <el-input v-model="commissionForm.level1_rate" placeholder="输入比例"></el-input>
            <div class="rate-suffix">%</div>
          </div>
          <div class="form-desc">订单交易成功后给上1级返佣的比例0 - 100,例5 = 反订单金额的5%</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">二级返佣比例</div>
        <div class="form-control">
          <div class="rate-input">
            <el-input v-model="commissionForm.level2_rate" placeholder="输入比例"></el-input>
            <div class="rate-suffix">%</div>
          </div>
          <div class="form-desc">订单交易成功后给上1级返佣的比例0 - 100,例5 = 反订单金额的5%</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">自购返佣</div>
        <div class="form-control">
          <el-radio-group v-model="commissionForm.self_purchase">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <div class="form-desc">是否开启自购返佣（开启：分销员自己购买商品，享受一级返佣；关闭：分销员自己购买商品没有返佣）</div>
        </div>
      </div>
    </div>
  </el-card>
  
  <!-- 结算设置 -->
  <el-card class="card op" :body-style="{ padding: '10px 20px 20px 20px' }">
    <template #header>
      <div class="setting">结算设置</div>
    </template>
    <div class="form-content">
      <div class="form-item">
        <div class="form-label">结算时间</div>
        <div class="form-control">
          <div class="time-input">
            <div class="settlement-label">订单完成后</div>
            <el-input v-model="settlementForm.settlement_days"></el-input>
            <div class="settlement-suffix">天</div>
          </div>
          <div class="form-desc">预估佣金会结算后无法进行回收，请谨慎设置结算天数</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">佣金到账方式</div>
        <div class="form-control">
          <el-radio-group v-model="settlementForm.payment_method">
            <el-radio :label="1">手动到账</el-radio>
            <el-radio :label="2">自动到微信等待转</el-radio>
          </el-radio-group>
          <div class="form-desc">佣金到账方式支持线下转账和微信零钱自动转账，手动转账更安全，自动转账更方便</div>
        </div>
      </div>
      
      <div class="form-item">
        <el-button type="primary" color="var(--primary-theme-color)" @click="saveSettings">保存</el-button>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.setting {
  font-size: 14px;
  position: relative;
  padding-left: 10px;

  &::before {
    position: relative;
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    background-color: var(--primary-theme-color);
    left: -4px;
    top: 50%;
    transform: translateY(20%);
  }
}

.op {
  margin-bottom: 20px;
}

.form-content {
  padding: 10px 0;
}

.form-item {
  margin-bottom: 20px;
  display: flex;
  
  .form-label {
    width: 120px;
    line-height: 32px;
    font-size: 14px;
  }
  
  .form-control {
    flex: 1;
    
    .form-desc {
      margin-top: 5px;
      color: #999;
      font-size: 12px;
      line-height: 1.5;
    }
  }
}

.rate-input, .time-input {
  display: flex;
  align-items: center;
  
  .el-input {
    width: 240px;
  }
  
  .rate-suffix, .settlement-suffix, .settlement-label {
    margin: 0 10px;
    line-height: 32px;
  }
}

.poster-wrapper {
  display: flex;
  gap: 20px;
  
  .poster-item, .poster-upload {
    width: 180px;
    height: 180px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
    cursor: pointer;
  }
  
  .poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .poster-upload {
    font-size: 30px;
    color: #c0c4cc;
  }
}
</style>
